<template>
  <div class="dashboard-container">
    <v-alert
      color="whit"
      icon="mdi-vuetify"
      border="left"
      prominent
      class="page-header-tip"
    >
      <p class="page-header-tip-title"> 您好 <span v-text="user_nickname" />，愿你天黑有灯，下雨有伞。 </p>
      <p class="page-header-tip-description">最近更新内容：1、正在开发中</p>
    </v-alert>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'user_nickname',
      'user_avatar'
    ]),
    /**
     * 剔除不在侧边栏中展示路径对象
     * @return {Array}
     */
    routes() {
      const routes = this.constRoutes.concat(this.asyncRoutes)
      return routes.filter(item => !item.hidden)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  .page-header-tip {
    padding: 20px;
    .page-header-tip-title {
      margin-bottom: 12px;
      font-size: 20px;
      font-weight: 700;
      color: #3c4a54;
    }
    .page-header-tip-description {
      min-height: 20px;
      font-size: 14px;
      color: #808695;
      margin-bottom: 0;
    }
  }
}
</style>
